<template>
  <div>
    <heads />
    <Main :type="'form'">
      <el-form ref="form" label-width="170px" :model="form" :rules="form">
        <el-form-item
          label="自定义名称"
          prop="name"
          :rules="{
            required: true,
            message: '请输入自定义名称',
            trigger: 'blur'
          }"
        >
          <el-input
            v-model="form.name"
            class="form-input"
            size="medium"
            placeholder="请输入自定义名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="设置为默认配送方式"
          prop="is_default"
          :rules="{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }"
        >
          <el-switch
            v-model="form.is_default"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          &nbsp;
          <span style="color:#909399">{{
            form.is_default ? "已开启" : "已关闭"
          }}</span>
        </el-form-item>
        <!-- <el-form-item label='系统自动完成备货'
                        prop='value2'
                        :rules='{ required: true, message: '请输入名称', trigger: 'blur' }'>
            <el-switch v-model='form.value2'
                       active-color='#13ce66'
                       inactive-color='#ff4949'>
            </el-switch>
            &nbsp;
            <span style='color:#909399'>{{form.value2?'已开启':'已关闭'}}</span>

          </el-form-item> -->
        <el-form-item
          label="提货有效期"
          prop="is_yourself_period"
          :rules="{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }"
        >
          <el-switch
            v-model="form.is_yourself_period"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          &nbsp;
          <span style="color:#909399">{{
            form.is_yourself_period ? "已开启" : "已关闭"
          }}</span>
          <div v-if="form.is_yourself_period">
            <el-form-item
              label="备货完成"
              prop="yourself_period_day"
              :rules="{
                required: true,
                message: '请输入天数',
                trigger: 'blur'
              }"
            >
              <el-input-number
                v-model="form.yourself_period_day"
                size="medium"
                class="form-min-input"
                :precision="0"
                :min="0"
                placeholder="请输入"
                :controls="false"
              ></el-input-number>
              天后，停止提货
              <span style="color:#909399">填写0天，即仅限当天可提货</span>
            </el-form-item>
            <el-form-item
              label="过期订单处理"
              prop="youself_period_gq"
              :rules="{
                required: true,
                message: '请输入名称',
                trigger: 'blur'
              }"
            >
              <el-radio-group v-model="form.youself_period_gq">
                <el-radio :label="1">过期后，订单将自动完成，不退款</el-radio>
                <el-radio :label="2"
                  >过期后，订单将自动维权，自动向买家退款</el-radio
                >
              </el-radio-group>
              <div style="color:#909399">
                周期购订单不支持自动退款，过期包裹将自动完成
              </div>
            </el-form-item>
          </div>
        </el-form-item>

        <!-- <el-form-item label='自定义下单字段'>
            <el-button size='mini'
                       type='text'
                       @click='edit'> 编辑 </el-button>
            <el-button size='mini'
                       type='text'
                       @click='refresh'> 刷新 </el-button> <br />
            <div class='tables'>
              <el-table :data='form.tableData'
                        :header-row-style='{color:'#333333',fontSize: '14px',letterSpacing:'0.39px'}'
                        style='width:80%;'>
                <el-table-column label='字段名称'>
                  <template slot-scope='scope'>

                  </template>
                </el-table-column>
                <el-table-column label='字段格式'>
                  <template slot-scope='scope'>

                  </template>
                </el-table-column>
                <el-table-column label='是否必填'>
                  <template slot-scope='scope'>
                  </template>
                </el-table-column>
                <el-table-column label='排序'>
                  <template slot-scope='scope'>

                  </template>
                </el-table-column>

              </el-table>
              <div style='margin-top:10px;font-size:12px;'
                   class='add-form-item'>
                <el-button plain
                           @click='addTemplate'>新增自定义模板</el-button>
                &emsp;

              </div>

            </div>
          </el-form-item> -->
        <el-form-item
          label="自定义系统字段名称"
          :rules="{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }"
        >
          <div style="color:#909399">
            在前台显示的自定义名称，最多10个字
          </div>
          <el-form-item
            label="自提点名称"
            prop="youself_name"
            style="margin-bottom: 15px;"
            :rules="{
              required: true,
              message: '请输入名称',
              trigger: 'blur'
            }"
          >
            <el-input
              v-model="form.youself_name"
              class="form-input"
              size="medium"
              placeholder="请输入模板名称"
              style="line-height: 20px;"
              maxlength="5"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item
            label="提货时间名称"
            prop="youself_time_name"
            style="margin-bottom: 15px;"
            :rules="{
              required: true,
              message: '请输入名称',
              trigger: 'blur'
            }"
          >
            <el-input
              v-model="form.youself_time_name"
              class="form-input"
              size="medium"
              placeholder="请输入模板名称"
              style="line-height: 20px;"
              maxlength="5"
              show-word-limit
            ></el-input>
            &nbsp;&nbsp;<span style="color:#909399"
              >商家未开启自动备货或未开启可选自提时间，则手机端将屏蔽该字段</span
            >
          </el-form-item>
          <el-form-item
            label="提货手机名称"
            prop="youself_mobile_name"
            style="margin-bottom: 15px;"
            :rules="{
              required: true,
              message: '请输入名称',
              trigger: 'blur'
            }"
          >
            <el-input
              v-model="form.youself_mobile_name"
              class="form-input"
              size="medium"
              placeholder="请输入模板名称"
              style="line-height: 20px;"
              maxlength="5"
              show-word-limit
            ></el-input>
            &nbsp;&nbsp;<el-checkbox v-model="form.is_yourself_mobile"
              >设为必填项</el-checkbox
            >
          </el-form-item>
        </el-form-item>
        <!-- <el-form-item label='是否开启跨自提点核销'
                        prop='value2'
                        :rules='{ required: true, message: '请输入名称', trigger: 'blur' }'>
            <el-switch v-model='form.value2'
                       active-color='#13ce66'
                       inactive-color='#ff4949'>
            </el-switch>
            &nbsp;
            <span style='color:#909399'>{{form.value2?'已开启':'已关闭'}}&nbsp;&nbsp;开启后，买家可在任意自提点完成核销和提货。未开启状态下，买家只能在下单时选择的自提点进行提货并核销。</span>

          </el-form-item> -->
      </el-form>
    </Main>
    <Footer>
      <el-button type="primary" @click="submit">保 存</el-button>
    </Footer>
  </div>
</template>
<script>
import { YOURSELFSETTING } from "../../service";
import heads from "../component/heads";
export default {
  components: {
    heads
  },
  data() {
    return {
      send: "",
      options: "second",
      radius: 1,
      form: {
        name: "",
        is_default: false,
        is_yourself_period: false,
        yourself_period_day: "",
        youself_period_gq: 1,
        youself_name: "",
        youself_time_name: "",
        youself_mobile_name: "",
        is_yourself_mobile: false,
        tableData: [
          {
            area: "所有区域默认配送",
            first: 1,
            first_price: 0,
            continuation: 1,
            continuation_price: 0
          }
        ]
      },
      radio: "",
      valTime: "",
      timeArr: [],
      dialog: false,
      checked: true,
      showTimeDEL: -1,
      templateName: ""
    };
  },
  created() {
    YOURSELFSETTING().then(res => {
      let { code, data } = res;
      if (code === 200) {
        this.form.name = data.name;
        this.form.is_default = data.is_default === 1;
        this.form.is_yourself_period = data.is_yourself_period === 1;
        this.form.yourself_period_day = data.yourself_period_day;
        this.form.youself_period_gq = data.youself_period_gq;
        this.form.youself_name = data.youself_name;
        this.form.youself_time_name = data.youself_time_name;
        this.form.youself_mobile_name = data.youself_mobile_name;
        this.form.is_yourself_mobile = data.is_yourself_mobile === 1;
      }
    });
  },
  methods: {
    addTime() {
      if (this.valTime) {
        if (this.timeArr.length > 0) {
          let v = this.valTime[0].replace(/:/g, "");
          let t = this.timeArr[length - 1].end.replace(/:/g, "");
          if (parseInt(v) < parseInt(t)) {
            this.$message.error("新添加时间段不能早于已添加时间段内");
            return;
          }
        }
        this.timeArr.push({ start: this.valTime[0], end: this.valTime[1] });
      } else {
        this.$message.error("请选择时间段");
      }
      this.valTime = "";
    },
    timeDel(i) {
      this.timeArr.splice(i, 1);
    },
    edit() {
      window.open("/order/orderList");
    },
    editTemplate(e) {
      this.dialog = true;
      this.dataJson = e;
    },
    addTemplate() {
      let tableid =
        "1" +
        new Date()
          .getTime()
          .toString()
          .substring(8) +
        Math.floor(Math.random() * (99 - 10)) +
        1;

      this.form.tableData.push({
        tableid,
        area: "",
        first: 1,
        first_price: 0,
        continuation: 1,
        continuation_price: 0
      });
    },
    delTemplate(i) {
      this.form.tableData.splice(i, 1);
    },

    async submit() {
      await this.$refs["form"].validate(valid => {
        if (valid) {
          YOURSELFSETTING({
            flag: "save",
            name: this.form.name,
            is_default: this.form.is_default ? 1 : 0,
            is_yourself_period: this.form.is_yourself_period ? 1 : 0,
            yourself_period_day: this.form.yourself_period_day,
            youself_period_gq: this.form.youself_period_gq,
            youself_name: this.form.youself_name,
            youself_time_name: this.form.youself_time_name,
            youself_mobile_name: this.form.youself_mobile_name,
            is_yourself_mobile: this.form.is_yourself_mobile ? 1 : 0
          }).then(res => {
            let { code, msg } = res;
            if (code === 200) {
              this.$emit("out");
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        } else {
          return false;
        }
      });
    },
    dialogShow() {
      this.dialog = false;
    },
    handleClick() {},
    refresh() {}
  }
};
</script>
<style lang="scss" scoped>
.switchs {
  width: 100%;
  height: 114px;
  background: #fff;
  padding: 10px 0;
  p {
    margin-bottom: 40px;
    height: 80px;
    background: #f7f7f7;
    border-radius: 6px;
    line-height: 80px;
    font-size: 20px;
    font-weight: bold;
    padding-left: 20px;
  }
}
.interval {
  margin-bottom: 20px;
}
.tabs {
  width: 58px;
  margin-left: 60px;
}
.timesInterval {
  width: 50%;
  height: 100px;
  background: #f2f2f6;
  border-radius: 6px;
  padding: 10px 50px;
  font-size: 12px;
}

.timeC {
  width: 80%;
  display: flex;
  .time-chlid {
    width: 130px;
    height: 40px;
    text-align: center;
    color: #fff;
    background: #c0c4cc;
    position: relative;
    margin: 0 10px 10px 0;
    .time-del {
      position: absolute;
      top: 3px;
      right: 3px;
      color: #f56c6c;
      cursor: pointer;
    }
  }
}
</style>
